<script setup>
import { ref, reactive, computed } from "vue"
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
import authHttp from "@/api/authHttp";
import { ElMessage } from 'element-plus';
import {
    Expand,
    Fold
} from '@element-plus/icons-vue'
import OAMain from "@/components/OAMain.vue"


let isCollapse = ref(false);
let asideWidth = computed(() => (isCollapse.value ? "64px" : "250px"));
let auth = useAuthStore();
let router = useRouter();

let form = reactive({
    old_pwd: '',
    pwd1: '',
    pwd2: ''
});

let rules = reactive({
    old_pwd: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
        { min: 6, max: 20, message: "密码长度需在6-20之间", trigger: 'blur' }
    ],
    pwd1: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, max: 20, message: "密码长度需在6-20之间", trigger: 'blur' }
    ],
    pwd2: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        { min: 6, max: 20, message: "密码长度需在6-20之间", trigger: 'blur' }
    ]
})

const onCollapse = () => {
    isCollapse.value = !isCollapse.value;
}

const openChangePasswordPage = () => {
    router.push({ name: 'reset' });
}

const resetPassword = async () => {
    try {
        await authHttp.Pwdreset(form.old_pwd, form.pwd1, form.pwd2)
        ElMessage.success('密码修改成功');
        console.log("密码修改成功")
        // let token = data.token
        // let user = data.user
        // authStore.setUserToken(user, token);
        //跳转到OA首页
        // router.push({ name: "frame" })
        clearForm()
    } catch (detail) {
        ElMessage.error(detail)
    }
};


const clearForm = () => {
    form.old_pwd = '';
    form.pwd1 = '';
    form.pwd2 = '';
}

const onExit = () => {
    auth.clearToken();
    router.push({ name: 'login' });
}
</script>



<template>
    <OAMain title="修改密码">
        <div class="form-container">
            <el-form :model="form" label-width="auto" style="max-width: 600px" :rules="rules">
                <el-form-item label="旧密码" prop="old_pwd">
                    <el-input v-model="form.old_pwd" type="password" />
                </el-form-item>
                <el-form-item label="新密码" prop="pwd1">
                    <el-input v-model="form.pwd1" type="password" />
                </el-form-item>
                <el-form-item label="确认密码" prop="pwd2">
                    <el-input v-model="form.pwd2" type="password" />
                </el-form-item>
                <el-button class="confirm-button" type="primary" @click="resetPassword">确认</el-button>
            </el-form>
        </div>
    </OAMain>

    <!-- </el-container> -->
    <!-- </el-container> -->
</template>


<style scoped>
.container {
    height: 100vh;
    background-color: #f4f6f9;
}

.aside {
    background-color: #343a40;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22) !
}

.aside .brand {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #434a50;
    background-color: #232631;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.header {
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .left-header {
    display: flex;
    align-items: center;
}

.el-menu {
    border-right: none;
}

.el-dropdown-link {
    display: flex;
    align-items: center;
}

.reset-password-form {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.form-container {
    display: flex;
    margin-left: 500px;
    margin-top: 180px;
    height: calc(100vh - 60px);
    /* 60px is the header height */
    background-color: #f4f6f9;
    transform: scale(1.3);
}

.confirm-button {
    position: relative;
    top: 5px;
    left: 215px;
}

/* input[aria-hidden="true"] {
    display: none !important;
}

.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none;
}

.ant-modal div[aria-hidden="true"] {
		display: none !important
} */
</style>
